<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房间列表</title>
    <script type="text/javascript" src="layuiadmin/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <link rel="stylesheet" href="layuiadmin/layui/css/layui.css">
    <link rel="stylesheet" href="layuiadmin/style/admin.css">
    <style>
        .sel_btn{
            height: 35px;
            line-height: 35px;
            padding: 0 11px;
            background-color: #1E9FFF;
            border-radius: 3px;
            display: inline-block;
            text-decoration: none;
            font-size: 14px;
            outline: none;
            color: white;
        }
        .ch_cls{
            background: #e4e4e4;
        }
        .layui-table-cell{
            height:60px;
            line-height: 60px;
        }
        .onlineDiv{
            width: 150px;
            height: 150px;
            /*border: 1px solid red;*/
            border-radius: 5px;
            display: inline-block;
            margin: 20px;
        }
        .onlineDiv span{
            margin-top: 10px;
            font-size: 15px;
        }
    </style>
</head>
<body>
<div style="width: 1250px;text-align: center" class="layui-body">
    <div>
        <h2>哈喽，<span id="nickName"></span>！</h2>
        <fieldset class="layui-elem-field" style="background-color: beige">
            <legend>房间列表：</legend>
            <div id="roomLists" style="/*display: none;*/margin-top: 20px; text-align: center" class="layui-field-box">

            </div>
        </fieldset>
        <div class="layui-btn-container">
            <button type="button" class="layui-btn layui-btn-lg" id="createHome">创建房间</button>
        </div>
    </div>

</div>
</body>
<script>
    var username = '';
    var role = '';
    var selfCard = '';
    var model = '';
    var layer;
    layui.use(['table','layer'], function(){
        var table = layui.table;
        var $ = layui.jquery;
            layer = layui.layer; //独立版的layer无需执行这一句
        // 1 庄 2 民
        role = getUrlParameter('role');
        username = getUrlParameter('name');
        if(!username || username == '' || username == 'undefined'){
            layer.msg("用户信息为空！等管理员为您分配账号！！");
            return;
        }
        $('#nickName').text(username);
        model = getUrlParameter('model');

        setInterval(function () {
            getRoomLists();
        },3000);

        //创建房间
        $('#createHome').on('click',function () {
            layer.confirm('确定要创建属于你的房间吗？', {
                btn: ['确定','不了'] //按钮
            }, function(){
                var index = layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['250px', '200px'], //宽高
                    title:'请选择一个游戏模式',
                    content:'<div id="isChecked" style="font-size: 20px;text-align: center">\n' +
                        '        <label>游戏模式</label>\n' +
                        '        <div>\n' +
                        '            <input type="radio" style="zoom:1;" name="mode" value="1" title="收羊皮" checked="true">收羊皮\n' +
                        '            <input type="radio" style="zoom:1;" name="mode" value="2" title="梦幻拖拉机">梦幻拖拉机\n' +
                        '        </div>\n' +
                        '    </div>' +
                        '<div style="margin-top: 10px; text-align: center">\n' +
                        '                <a href="#" class="sel_btn" id="sure">确定</a>\n' +
                        '            </div>',

                });
                var isChecked = '';
                $('#sure').on('click',function () {
                   console.log($("input[type='radio']:checked").val());
                   isChecked = $("input[type='radio']:checked").val();
                    $.ajax({
                        url:'v2/createHome?homeownerName=' + username + '&mode=' + isChecked,
                        type:'get',
                        async:false,
                        success:function(res){
                            if(res.code == 200){
                                layer.msg("房间创建成功，等小伙伴加入吧！！！");
                                window.location.href="bookmaker.html?name=" + username + '&homeownerName=' + username;
                            }else if(res.code == 500){
                                layer.msg(res.message);
                            }
                        },
                        error: function(msg){}
                    });
                   layer.close(index);
                });
            }, function(){

            });
        });

    });

    function getRoomLists() {
        $.ajax({
            url:'v2/homeList?homeownerName=' + username,
            type:'get',
            async:false,
            success:function(res){
                if(res.code == 200){
                    // var data = '{"msg":"success","code":200,"data":{"mode":2,"userNum":2,"homeowner":"wdc","players":[{"name":"wdc","role":1,"myCards":["img/hongtaoK.png"],"cardsSize":1,"cardsState":1},{"name":"cj","role":0,"myCards":["img/meihua3.png"],"cardsSize":1,"cardsState":1}],"pubCard":"img/bb.png","pooSize":52}}';
                    var data = res.data;
                    var joinHtml = '';
                    $('#roomLists').children().remove();
                    for(var i = 0 ; i < data.length ; i ++){
                        var homeowner = data[i].homeowner;
                        joinHtml += '<div id="'+homeowner+'" class="onlineDiv">'+
                            '<img onclick="clickImg(\''+homeowner+'\',\''+username+'\');" style="width: 150px;height: 150px;" src="img/room.png" alt="">\n' +
                            '<span>【'+homeowner+'】的房间</span>'+
                            '</div>';
                    }
                    $('#roomLists').append(joinHtml);
                }
            },
            error: function(msg){}
        });
    }

    function clickImg(homeowner,name) {
        var role = 0;
        if(homeowner == name){
            role = 1;
        }
        var joinUrl = 'v2/join?role=' + role + '&name=' + name + '&homeownerName=' + homeowner;
        //joinUrl = encodeURI(encodeURI(joinUrl));
        layer.confirm('确定加入房间吗？', {
            btn: ['确定','取消'] //按钮
        }, function() {
            $.ajax({
                url:joinUrl,
                type:'get',
                async:false,
                success:function(res){
                    if(res.code == 200){
                        /*alert("【"+name+"】加入【"+homeowner+"】的房间！！！");*/
                        if(role == 1){
                            window.location.href="bookmaker.html?name=" + name + '&homeownerName=' + homeowner;
                        }else if(role == 0){
                            window.location.href="civilian.html?name=" + name + '&homeownerName=' + homeowner;
                        }
                    }
                },
                error: function(msg){}
            });
        });
    }

</script>
</html>
